<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
    <title>大过新年</title>
    <link rel="stylesheet" href="/lottery/css/stylesheet.css?version=1.4.0.<?php echo mt_rand(); ?>">
</head>
<body>
    <!-- loading -->
    <section class="midea midea-section midea-loading midea-active">
        <div class="midea-loading-pig"></div>
    </section>

    <!-- video -->
    <section class="midea midea-section midea-video">
    <div class="midea-video-boxes">
      <video id="video" src="http://m3u8.nanmianyun.cn/2019012701.mp4" controls playsinline="true" autoplay="true"></video>
    </div>
 

 <div class="bg_d_g">
   <div>
 
      <img src="http://h51.nanmianyun.cn/bg_d6.png" class="bg_d" />
   </div>
          
  
    </div>  
   
    <div onclick="javascript:void(0);" class="midea-video-button">点击抽奖</div>

   
    <div onclick="javascript:void(0);" class="midea-video-buttons">我的奖品</div>
               
           
  </section>
 
    <!-- game -->
    <section class="midea midea-section midea-game">
 		  <div class="midea_game_bg">

    </div>
    <div class="midea_game_on">
                 <div class="midea-game-boxes">
            <div id="lottery">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="lottery-unit lottery-unit-0">
                            <div class="back"></div>
                            <div class="mask"></div>
                            <div class="gift">
                                <img src="/lottery/images/lottery1.png" alt="">
                            </div>
                        </td>
                        <td class="lottery-unit lottery-unit-1">
                            <div class="back"></div>
                            <div class="mask"></div>
                            <div class="gift">
                                <img src="/lottery/images/lottery2.png" alt="">
                            </div>
                        </td>
                        <td class="lottery-unit lottery-unit-2">
                            <div class="back"></div>
                            <div class="mask"></div>
                            <div class="gift">
                                <img src="/lottery/images/lottery3.png" alt="">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="lottery-unit lottery-unit-7">
                            <div class="back"></div>
                            <div class="mask"></div>
                            <div class="gift">
                                <img src="/lottery/images/lottery4.png" alt="">
                            </div>
                        </td>
                        <td><a href="javascript:void(0);"></a></td>
                        <td class="lottery-unit lottery-unit-3">
                            <div class="back"></div>
                            <div class="mask"></div>
                            <div class="gift">
                                <img src="/lottery/images/lottery5.png" alt="">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="lottery-unit lottery-unit-6">
                            <div class="back"></div>
                            <div class="mask"></div>
                            <div class="gift">
                                <img src="/lottery/images/lottery6.png" alt="">
                            </div>
                        </td>
                        <td class="lottery-unit lottery-unit-5">
                            <div class="back"></div>
                            <div class="mask"></div>
                            <div class="gift">
                                <img src="/lottery/images/lottery7.png" alt="">
                            </div>
                        </td>
                        <td class="lottery-unit lottery-unit-4">
                            <div class="back"></div>
                            <div class="mask"></div>
                            <div class="gift">
                                <img src="/lottery/images/lottery8.png" alt="">
                            </div>
                        </td>
                    </tr>
                </table>
                <div class="midea-alert"></div>
            </div>
        </div>
        <div class="midea-game-group">
            <button class="midea-game-button midea-open-rule">活动规则</button>
            <button class="midea-game-button midea-counts">您有<span>3</span>次机会</button>
        </div>
        <div class="midea-game-tips">
            活动时间：1月28日-2月24日截止
           
        </div>
      	</div>
    </section>

    <!-- video -->
    <section class="midea midea-section midea-mask">
        <div class="midea-mask-content">
            <span class="midea-mask-close"></span>

            <!-- rule -->
            <div class="midea-rule midea-mask-item">
                <h2>活动规则</h2>
                <ul>
                    <li>
                        <strong> 活动时间</strong> : 1月28日-2月24日截止
                    </li>
                    <li>
                        <strong> 活动形式</strong> : 每人每天有三次抽奖机会
                    </li>
                    <li>
                        <strong> 用券规则</strong> : 本活动的电子优惠券直接领取到指定平台，按优惠券的使用规则进行使用
                    </li>
                    <li>
                        <strong> 奖品领取</strong> : 抽中实物奖品必须填写联系方式，否则视为放弃领取。实物奖品在活动结束后7个工作日内，快递送出给中奖用户。
                    </li>
                </ul>
                <small>*活动最终解释权归美的及必胜客所有。</small>
            </div>

            <!-- card -->
            <div class="midea-card midea-mask-item">
                <h2>恭喜您！</h2>
                <h2 class="midea-card-desc">抽中必胜客[大]红包</h2>
                <div class="midea-card-img">
                    <img src="/lottery/images/card-bsk.png" alt="">
                </div>
                <div class="midea-card-info">
                    任意消费可得鸡茸蘑菇汤1份
                </div>
                <a href="javascript:void(0);">点击领取</a>
            </div>

            <!-- form -->
            <div class="midea-form midea-mask-item">
                <h2>
                    请填写领奖信息
                    <small>需填写信息，不填写则视为放弃领取</small>
                </h2>
                <div class="midea-form-item">
                    <label>姓名：</label>
                    <div class="midea-form-control">
                        <input type="text" name="username" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="midea-form-item">
                    <label>手机：</label>
                    <div class="midea-form-control">
                        <input type="tel" name="telephone" placeholder="请输入手机号码">
                    </div>
                </div>
                <div class="midea-form-item">
                    <label>省市：</label>
                    <div class="midea-form-control">
                        <input type="text" name="address" placeholder="请输入省市">
                      </div>
                </div>
                <div class="midea-form-item">
                    <label>区县：</label>
                    <div class="midea-form-control">
                        <input type="text" name="address1" placeholder="请输入区县">
                      </div>
                </div>
                <div class="midea-form-item">
                    <label>街道：</label>
                    <div class="midea-form-control">
                        <input type="text" name="address2" placeholder="请输入街道门牌">
                      </div>
                </div> 
                <div class="midea-form-button"></div>
            </div>

            <!-- gift -->
            <div class="midea-gift midea-mask-item">
                <h2>新年乘风破浪</h2>
                <div class="midea-gift-img">
                    <img src="https://h5.nanmianyun.cn/lottery/images/gift1.png" alt="">
                </div>
                <div class="midea-gift-button">点击领取</div>
            </div>

            <!-- success -->
            <div class="midea-success midea-mask-item">
                <h2>领取成功</h2>
                <div class="midea-success-img">
                    <img src="https://h5.nanmianyun.cn/lottery/images/suc1.png" alt="">
                </div>
                <div class="midea-success-button">返回抽奖页面</div>
            </div>

            <!-- history -->
            <div class="midea-history midea-mask-item">
                <h2>我的奖品记录</h2>
                <ul>
                    <li>
                        <span>哈哈哈</span>
                        <label for="">美的电饭煲</label>
                    </li>
                </ul>
                <div class="midea-page">  
                    <a class="prev" href="javascript:voide(0);">上一页</a>
                    <a class="next" href="javascript:voide(0);">下一页</a>
                </div>
                <div class="midea-history-button">点击确认</div>
            </div>

        </div>
    </section>
    <!-- script -->
    <script src="/lottery/js/fastclick.js"></script>
    <script src="/lottery/js/hotcss.js"></script>
    <script src="/lottery/js/jquery.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>
    <script>

        wx.config(<?php echo $app->jssdk->buildConfig(array('updateAppMessageShareData', 'updateTimelineShareData'), false) ?>);
        wx.ready(function () {      
             wx.updateTimelineShareData({ 
                title: "{{$share['title']}}", // 分享标题
                link: "{{$share['link']}}", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: "{{$share['imgUrl']}}", // 分享图标
                success: function () {
                  // 设置成功
                }
            });

             wx.updateAppMessageShareData({ 
                    title: "{{$share['title']}}", // 分享标题
                    desc: "{{$share['desc']}}", // 分享描述
                    link: "{{$share['link']}}", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{{$share['imgUrl']}}', // 分享图标
                    success: function () {
                      // 设置成功
                    }
            });
           
    
        });    

        var site = '{{url("game")}}/';
        var lottery={
            index:-1,    //当前转动到哪个位置，起点位置
            count:0,    //总共有多少个位置
            timer:0,    //setTimeout的ID，用clearTimeout清除
            speed:20,    //初始转动速度
            times:0,    //转动次数
            cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize:-1,    //中奖位置
            init:function(id){
                if ($("#"+id).find(".lottery-unit").length>0) {
                    $lottery = $("#"+id);
                    $units = $lottery.find(".lottery-unit");
                    this.obj = $lottery;
                    this.count = $units.length;
                    $lottery.find(".lottery-unit-"+this.index).addClass("active");
                };
            },
            roll:function(){
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                $(lottery).find(".lottery-unit-"+index).removeClass("active");
                index += 1;
                if (index>count-1) {
                    index = 0;
                };
                $(lottery).find(".lottery-unit-"+index).addClass("active");
                this.index=index;
                return false;
            },
            stop:function(index){
                this.prize=index;
                return false;
            }
        };
        
        var giftArr = [
            { value: 1, name: '美的电饭煲', src: 'https://h5.nanmianyun.cn//lottery/images/gift1.png', suc: 'https://h5.nanmianyun.cn/lottery/images/suc1.png' },
            { value: 2, name: '美的随行杯', src: 'https://h5.nanmianyun.cn/lottery/images/gift2.png', suc: 'https://h5.nanmianyun.cn/lottery/images/suc2.png' },
            { value: 3, name: '美的保温杯', src: 'https://h5.nanmianyun.cn/lottery/images/gift3.png', suc: 'https://h5.nanmianyun.cn/lottery/images/suc3.png' },
            { value: 9, name: '佩琦小玩偶', src: 'https://h5.nanmianyun.cn/lottery/images/gift4.png', suc: 'https://h5.nanmianyun.cn/lottery/images/suc4.png' }
        ]
        var cardArr = [
            { value: 4, name: '美的优惠券', src: 'https://h5.nanmianyun.cn/lottery/images/card-midea3.png', desc: '抽中美的[大]红包' },
            { value: 7, name: '必胜客优惠券', src: 'https://h5.nanmianyun.cn/lottery/images/card-bsk.png', desc: '抽中必胜客[大]红包' },
            { value: 8, name: '必胜客优惠券', src: 'https://h5.nanmianyun.cn/lottery/images/card-bsk.png', desc: '抽中必胜客[大]红包' }
        ]
        var gift = $('.midea-gift')
        var card = $('.midea-card')

        function roll(){
            lottery.times += 1;
            lottery.roll();
            if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
                clearTimeout(lottery.timer);
                lottery.prize=-1;
                lottery.times=0;
                click=false;
                $('#lottery a').removeClass('loading')
            }else{
                if (lottery.times<lottery.cycle) {
                    lottery.speed -= 10;
                }else if(lottery.times==lottery.cycle) {
                    // var index = Math.random()*(lottery.count)|0;
                    // lottery.prize = index;        
                }else{
                    if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                        lottery.speed += 110;
                    }else{
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed<40) {
                    lottery.speed=40;
                };
                //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
                lottery.timer = setTimeout(roll,lottery.speed);//循环调用
            }
            return false;
        }

        var click=false;

        window.onload=function(){
            lottery.init('lottery');
            var counts = null
            $.ajax({
                url: site + 'times',
                method: 'get',
                async: false,
                success: function(res) {
                    console.log(res)
                    if (res.status) {
                        counts = res.data
                        if (counts == 0) {
                            $('#lottery a').addClass('disabled');
                            $('.midea-counts').text('福满猪年')
                        } else {
                            $('.midea-counts').text('您有'+counts+'次机会')
                        }
                    } else {
                        counts = 3
                    }
                },
                error: function(err) {
                    counts = 3
                }
            })
            $('.midea-alert').on('click', function() {
                $('.midea-alert').fadeOut();
            })
            $("#lottery a").click(function(){
                if ($(this).hasClass('disabled')) {
                    $('.midea-alert').fadeIn()
                    return false
                }
                $(this).addClass('loading');

                var total = null
                $.ajax({
                    url: site + 'times',
                    method: 'get',
                    async: false,
                    success: function(res) {
                        console.log(res)
                        if (res.status) {
                            total = res.data
                        } else {
                            total = 3
                        }
                    },
                    error: function(err) {
                        console.log(err)
                        total = 3
                    }
                })

                if (total == 1) {
                    $(this).addClass('disabled')
                    $('.midea-counts').text('福满猪年')
                }
                if (total == 0) {
                    return false;
                }
                if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
                    return false;
                }else{
                    var nums = total--
                    $('.midea-counts').text('您有'+(nums-1)+'次机会')
                    if (nums-1 == 0) {
                        $('.midea-counts').text('福满猪年')
                    }
                    // ajax here
                    $.ajax({
                        url: site + 'draw',
                        method: 'get',
                        success: function(res) {
                            if (res.status) {
                                setTimeout(function(){
                                    $('.midea-game').fadeOut().removeClass('midea-active');
                                    $('.midea-mask').fadeIn().addClass('midea-active');
                                },5000)
                                var id = res.data.id
                                var prize = -1;
                                switch (id) {
                                    case 1:
                                        prize = 0
                                        gift.attr({'data-giftid':id, 'data-giftcode': res.data.code, 'data-result': res.data.result_id}).find('img').attr('src',giftArr[0].src)
                                        gift.addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active')
                                        break;
                                    case 2:
                                        prize = 2
                                        gift.attr({'data-giftid':id, 'data-giftcode': res.data.code, 'data-result': res.data.result_id}).find('img').attr('src',giftArr[1].src)
                                        gift.addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active')
                                        break;
                                    case 3:
                                        prize = 4
                                        gift.attr({'data-giftid':id, 'data-giftcode': res.data.code, 'data-result': res.data.result_id}).find('img').attr('src',giftArr[2].src)
                                        gift.addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active')
                                        break;
                                    case 9:
                                        prize = 6
                                        gift.attr({'data-giftid':id, 'data-giftcode': res.data.code, 'data-result': res.data.result_id}).find('img').attr('src',giftArr[3].src)
                                        gift.addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active')
                                        break;
                                    case 4:
                                        prize = 7
                                        card.find('img').attr('src',cardArr[0].src)
                                        card.find('.midea-card-desc').text(cardArr[0].desc)
                                        card.find('.midea-card-info').empty().text(res.data.content).append('<span><em>1</em>张</span>')
                                        card.find('a').attr('href', res.data.coupon_url)
                                        card.attr('data-giftid',id).addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active')
                                        break;
                                    case 7:
                                        prize = 1
                                        card.find('img').attr('src',cardArr[1].src)
                                        card.find('.midea-card-desc').text(cardArr[1].desc)
                                        card.find('.midea-card-info').empty().append('消费满168元<br><br>'+res.data.content)
                                        // card.find('.midea-card-info').empty().append(res.data.content.split('元')[0]+'元<br />'+res.data.content.split('元')[1])
                                        card.find('a').attr('href', res.data.coupon_url)
                                        card.attr('data-giftid',id).addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active')
                                        break;
                                    case 8:
                                        prize = 3
                                        card.find('img').attr('src',cardArr[2].src)
                                        card.find('.midea-card-desc').text(cardArr[2].desc)
                                        card.find('.midea-card-info').empty().text(res.data.content)
                                        card.find('a').attr('href', res.data.coupon_url)
                                        card.attr('data-giftid',id).addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active')
                                        break;
                                    default:
                                        break;
                                }
                                lottery.prize = prize
                                lottery.speed=100;
                                roll();    //转圈过程不响应click事件，会将click置为false
                                click=true; //一次抽奖完成后，设置click为true，可继续抽奖
                                return false;
                            } else {
                                // alert(res.msg)
                                $('.midea-alert').fadeIn()
                                $('#lottery a').removeClass('loading')
                            }
                        }
                    })
                }
            });
        };
        
        $(function() {

            // 获取高度
            // alert($(window).height())
            setTimeout(() => {
                $('.midea-loading').fadeOut().removeClass('midea-active')
                $('.midea-video').fadeIn().addClass('midea-active')
            }, 1000);

            // document.getElementById('video').play()
            document.addEventListener("WeixinJSBridgeReady",function() { 
                document.getElementById('video').play()
            }, false);

            setTimeout(() => {
                document.getElementById('video').play()
            }, 2000);
            
            // document.addEventListener('DOMContentLoaded', function () {
            //     function audioAutoPlay() {
            //         document.getElementById('video').play()
            //         document.addEventListener("WeixinJSBridgeReady", function () {
            //             document.getElementById('video').play()
            //         }, false);
            //     }
            //     audioAutoPlay();
            // });

            $('.midea-video-button').on('click', function() {
                $('.midea-video').fadeOut().removeClass('midea-active')
                $('.midea-game').fadeIn().addClass('midea-active')
                document.getElementById('video').pause()
            })

            // 关闭mask
            $('.midea-mask-close, .midea-success-button').on('click', function() {
                $(this).closest('.midea-mask').fadeOut().removeClass('midea-active');
                $('.midea-video').fadeIn().addClass('midea-active');
            })
            
            // 打开rule
            $('.midea-open-rule').on('click', function() {
                $(this).closest('.midea-game').fadeOut().removeClass('midea-active');
                $('.midea-mask').fadeIn().addClass('midea-active');
                $('.midea-rule').addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active');
            })

            $('.midea-gift .midea-gift-button').on('click', function() {
                $('.midea-gift').removeClass('midea-mask-active')
                $('.midea-form').addClass('midea-mask-active')
            })

            // 打开领取表单
            $('.midea-form .midea-form-button').on('click', function() {
                var data = {
                    gift_id: gift.attr('data-giftid'),
                    gift_code: gift.attr('data-giftcode'),
                    result_id: gift.attr('data-result'),
                    truename: $('input[name="username"]').val(),
                    mobile: $('input[name="telephone"]').val(),
                    address: $('input[name="address"]').val() + ' ' + $('input[name="address1"]').val() + ' ' + $('input[name="address2"]').val(),
                    _token:"{{csrf_token() }}"
                }
                if (data.truename == '') {
                    alert('请输入您的姓名')
                    return false
                }
                if (data.mobile.length != 11) {
                    alert('请输入正确的手机号码')
                    return false
                }
                if (data.address == '') {
                    alert('请输入您的地址')
                    return false
                }
               // alert('提交的参数'+JSON.stringify(data))
              
                if( confirm('请确认所提交的信息无误，提交后无法修改。') ){
                    $.ajax({
                        url: site + 'save-info',
                        // url: site + 'save-info?gift_id='+data.gift_id+'&gift_code='+data.gift_code+'&truename='+data.truename+'&mobile='++data.mobile+'&address='+data.address,
                        method: 'get',
                        data: data,
                        success: function(res) {
                            console.log(res)
                            //alert('返回的参数'+JSON.stringify(res))
                            if (res.status) {
                               // alert('成功信息'+res.msg)
                                $('.midea-success').addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active');
                                if (data.gift_id != 9 ) {
                                    $('.midea-success').find('img').attr('src', giftArr[data.gift_id-1].suc);
                                } else {
                                    $('.midea-success').find('img').attr('src', giftArr[3].suc)
                                }
                            } else {
                                alert(res.msg);
                            }
                        },
                        error: function(err) {
                        }
                    })
        		}
            })


          
            function setCookie(name,value) {
                var Days = 30;
                var exp = new Date();
                exp.setTime(exp.getTime() + Days*24*60*60*1000);
                document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
            }  
          
            function getCookie(name) {
                var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
                if(arr=document.cookie.match(reg))
               		return unescape(arr[2]);
                else
               		return null;
            }
          
            setCookie('page',1);
          
            // 领取详情
            $('.midea-video-buttons').on('click', function() {
                $.ajax({
                    url: site+'my-gift',
                    method: 'get',
                    success: function(res) {
                        console.log(res)
                        if (res.data && res.data.length) {
                            var dom = ''
                            res.data.forEach(function(item) {
                                dom += '<li><span>'+item.created_at+'</span><label>'+item.gift_name+'</label></li>'
                            })
                            console.log(dom)
                            $('.midea-history ul').empty().append(dom)
                            $('.midea-game').fadeOut().removeClass('midea-active');
                            $('.midea-mask').fadeIn().addClass('midea-active');
                            $('.midea-history').addClass('midea-mask-active').siblings('.midea-mask-item').removeClass('midea-mask-active');
                            
                            $('.midea-video').fadeOut().removeClass('midea-active');
                            document.getElementById('video').pause();
                        } else {
                            alert('未中奖')
                        }
                    }
                })
            })
          
            $('.midea-page .prev').on('click', function() {
                page = getCookie('page')*1;
                if( page != 1 ){
                  setCookie('page',page-1);
                  $.ajax({
                        url: site+'my-gift',
                        method: 'get',
                        success: function(res) {
                            console.log(res)
                            if (res.data && res.data.length) {

                                var dom = ''
                                res.data.forEach(function(item) {
                                    dom += '<li><span>'+item.created_at+'</span><label>'+item.gift_name+'</label></li>'
                                })
                                console.log(dom)
                                $('.midea-history ul').empty().append(dom);
                            } else {
                                alert('没有上一页')
                            }
                        }
                    });
                }else {
                    alert('没有上一页')
                }
            });
          
            $('.midea-page .next').on('click', function() {
              setCookie('page',getCookie('page')*1+1);
              $.ajax({
                    url: site+'my-gift',
                    method: 'get',
                    success: function(res) {
                        console.log(res)
                        if (res.data && res.data.length) {
                          
                            var dom = ''
                            res.data.forEach(function(item) {
                                dom += '<li><span>'+item.created_at+'</span><label>'+item.gift_name+'</label></li>'
                            })
                            console.log(dom)
                            $('.midea-history ul').empty().append(dom);
                        } else {
                            alert('没有下一页')
                          
             				setCookie('page',getCookie('page')*1-1);
                          
                        }
                    }
                })
            });
          
          
          
            // 跳转
            $('.midea-card a').on('click', function() {
                $.ajax({
                    url: site + 'save-coupon',
                    method: 'get',
                    data: {
                        result_id: gift.attr('data-result')
                    },
                    success: function(res) {
                        console.log(res)
                        // window.location.replace($(this).attr('data-href'))
                    }
                })
                window.location.replace($(this).attr('data-href'))
            })

        })

    </script>
</body>
</html>